<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Bootstrap -->
<link href="statics/css/sim.css" rel="stylesheet">
<link href="statics/css/doc.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="statics/js/html5shiv.js"></script>
<script src="statics/js/respond.min.js"></script>
<![endif]-->
</head>

<body style="margin:20px;">

<div class="panel panel-default inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容 
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-primary inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-success inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-info inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-warning inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-danger inline-block">
	<div class="panel-heading">面板头部</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-default panel-noborder inline-block">
	<div class="panel-heading">面板头部（无边框）</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>

<div class="panel panel-default inline-block">
	<div class="panel-heading">
		<div class="panel-title">面板头部</div>
		<div class="right-content">
			<a href="#" class="btn btn-default"><i class="fa fa-cogs"></i></a>
		</div>
	</div>
	<div class="panel-body">
		面板内容
	</div>
	<div class="panel-footer">面板底部</div>
</div>


<p class="f-mt20">

	<div class="panel headless inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-default inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-primary inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-success inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-info inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-warning inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

	<div class="panel headless panel-danger inline-block">
		<div class="panel-heading">面板头部</div>
		<div class="panel-body">
			面板内容
		</div>
		<div class="panel-footer">面板底部</div>
	</div>

</p>

<div class="box">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-default">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-primary">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-success">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-info">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-warning">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<div class="box bg-danger">
	<h4 class="small-title"><strong>盒子头部</strong></h4>
	<hr />
	盒子内容
</div>

<p class="f-mt20">
	<a href="#" class="btn btn-default">默认按钮</a>
	<a href="#" class="btn btn-primary">当前项</a>
	<a href="#" class="btn btn-info">一般信息</a>
	<a href="#" class="btn btn-success">成功信息</a>
	<a href="#" class="btn btn-warning">警告信息</a>
	<a href="#" class="btn btn-danger">危险信息</a>
	<a href="#" class="btn btn-link">链接</a>
</p>

<p class="f-mt20">
	<a href="#" class="btn btn-default btn-lg">大按钮</a>
	<a href="#" class="btn btn-default btn-md">中按钮</a>
	<a href="#" class="btn btn-default btn-sm">小按钮</a>
	<a href="#" class="btn btn-default btn-xs">超小按钮</a>
</p>

<p class="f-mt20 clearfix">
		<div class="btn-group" role="group" aria-label="...">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>

		<div class="btn-group" role="group" aria-label="...">
			<button type="button" class="btn btn-info">Left</button>
			<button type="button" class="btn btn-info">Middle</button>
			<button type="button" class="btn btn-info">Right</button>
		</div>

		<div class="btn-group" role="group" aria-label="...">
			<a class="btn btn-default">Left</a>
			<a class="btn btn-default">Middle</a>
			<a class="btn btn-default">Right</a>
		</div>

		<div class="btn-group" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>
	</p>


	<p class="f-mt20 clearfix">
		
		<div class="btn-toolbar" role="toolbar">
			<div class="btn-group" role="group" aria-label="...">
				<a class="btn btn-default">Left</a>
				<a class="btn btn-default">Middle</a>
				<a class="btn btn-default">Right</a>
			</div>
			<div class="btn-group" role="group" aria-label="...">
				<a class="btn btn-info">Left</a>
				<a class="btn btn-info">Middle</a>
				<a class="btn btn-info">Right</a>
			</div>
			<div class="btn-group" role="group" aria-label="...">
				<a class="btn btn-danger">Left</a>
				<a class="btn btn-danger">Middle</a>
				<a class="btn btn-danger">Right</a>
			</div>
		</div>


	</p>

	<p class="f-mt20 clearfix">
		
		<div class="btn-group btn-group-lg" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>
		
		<div class="btn-group btn-group-md" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>
		
		<div class="btn-group btn-group-sm" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>
		
		<div class="btn-group btn-group-xs" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>

	</p>

	<p class="f-mt20">
	
		<div class="btn-group-vertical" role="group" aria-label="...">
			<a class="btn btn-info">Left</a>
			<a class="btn btn-info">Middle</a>
			<a class="btn btn-info">Right</a>
		</div>


	</p>

<form class="form f-mt20">

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<p class="form-text">一个个文字文字</p>
	</div>

	<div class="form-item">
		<label class="form-label">
			<span class="form-required">*</span>表单项文本：
		</label>
		<input type="text" class="form-input" /> <span class="form-other"><a href="#">添加备注</a></span>
		<p class="form-explain">默认文案。</p>
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<input type="radio" class="form-radio" /> 单选　
			<input type="radio" class="form-radio" /> 单选
		</div>
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<div class="form-field-block"><input type="radio" class="form-radio" /> 单选</div>
			<div class="form-field-block"><input type="radio" class="form-radio" /> 单选</div>
		</div>
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选
		</div>
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
		</div>
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<select class="form-select">
			<option>湖南省</option>
			<option>湖北省</option>
			<option>广东省</option>
			<option>广西省</option>
		</select>
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<select class="form-select">
			<option>湖南省</option>
			<option>湖北省</option>
			<option>广东省</option>
			<option>广西省</option>
		</select>
		<select class="form-select">
			<option>长沙市</option>
			<option>株洲市</option>
			<option>湘潭市</option>
		</select>
		<select class="form-select">
			<option>雨花区</option>
			<option>天心区</option>
			<option>开福区</option>
			<option>芙蓉区</option>
		</select>
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<textarea class="form-textarea" cols="60" rows="5"></textarea>
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<input type="input" class="form-input" disabled="disabled" />
	</div>
		
	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<input type="input" class="form-input" />
		 <img class="form-checkcode" align="absMiddle" alt="请输入您看到的内容" src="https://omeo.alipay.com/service/checkcode?sessionID=82012ab6b1f4ed9e675fb9092a25cb3b&r=0.9321065918075809"  title="点击刷新图片校验码">
        <a href="#">看不清，换一张</a>
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<input type="text" class="form-input" value="2015-03-19" id="dp1" data-toggle="date" date-format="yyyy-dd-mm">
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="input-group date" id="dp3" data-toggle="date" data-date="2015-12-02" data-date-format="yyyy-mm-dd">
			<input class="form-input" size="16" type="text" value="">
			<span class="input-group-addon">日期</span>
		</div>
	</div>

	<div class="form-item">
		<label class="form-label">表单项文本：</label>
		<div class="input-group input-group-spinner" data-trigger="spinner">
			<input type="text" class="form-input" size="4" value="1" data-rule="quantity" />
			<span class="input-group-addon">
				<input type="submit" class="sort-up" data-spin="up" value="&#9650;" />
				<input type="submit" class="sort-down" data-spin="down" value="&#9660;">
			</span>
		</div>
	</div>

</form>
 
<form class="form f-mt20">
	
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<p class="form-text">一个个文字文字
	</div>

		
	<div class="form-item-block">
		<label class="form-label">
			<span class="form-required">*</span>表单项文本：
		</label>
		<input type="text" class="form-input" /> <span class="form-other"><a href="#">添加备注</a></span>
		<p class="form-explain">默认文案。</p>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<input type="radio" class="form-radio" /> 单选　
			<input type="radio" class="form-radio" /> 单选
		</div>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<div class="form-field-block"><input type="radio" class="form-radio" /> 单选</div>
			<div class="form-field-block"><input type="radio" class="form-radio" /> 单选</div>
		</div>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选　
			<input type="checkbox" class="form-checkbox" /> 多选
		</div>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<div class="form-field">
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
			<div class="form-field-block"><input type="checkbox" class="form-checkbox" /> 多选</div>
		</div>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<select class="form-select">
			<option>湖南省</option>
			<option>湖北省</option>
			<option>广东省</option>
			<option>广西省</option>
		</select>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<select class="form-select">
			<option>湖南省</option>
			<option>湖北省</option>
			<option>广东省</option>
			<option>广西省</option>
		</select>
		<select class="form-select">
			<option>长沙市</option>
			<option>株洲市</option>
			<option>湘潭市</option>
		</select>
		<select class="form-select">
			<option>雨花区</option>
			<option>天心区</option>
			<option>开福区</option>
			<option>芙蓉区</option>
		</select>
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<textarea class="form-textarea" cols="60" rows="5"></textarea>
	</div>
		
	<div class="form-itemblock">
		<label class="form-label">表单项文本：</label>
		<input type="input" class="form-input" disabled="disabled" />
	</div>
		
	<div class="form-item-block">
		<label class="form-label">表单项文本：</label>
		<input type="input" class="form-input" />
		 <img class="form-checkcode" align="absMiddle" alt="请输入您看到的内容" src="https://omeo.alipay.com/service/checkcode?sessionID=82012ab6b1f4ed9e675fb9092a25cb3b&r=0.9321065918075809"  title="点击刷新图片校验码">
        <a href="#">看不清，换一张</a>
	</div>

</form>

<table class="table">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-noborder f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<div class="panel panel-default f-mt20">
	<div class="panel-heading">面板镶嵌表格</div>
	<table class="table table-inpanel">
		<thead>
			<tr>
				<th>创建时间</th>
				<th>创建时间</th>
				<th>创建时间</th>
				<th>创建时间</th>
				<th>创建时间</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="5">表尾数据</td>
			</tr>
		</tfoot>
	</table>
</div>

<table class="table table-layout-fixed f-mt20">
	<thead>
		<tr>
			<th width="10%">创建时间</th>
			<th width="40%">创建时间</th>
			<th width="30%">创建时间</th>
			<th width="15%">创建时间</th>
			<th width="5%">创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>DataDataDataDataDataDataDataDataDataData</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-default f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-primary f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-success f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-info f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-warning f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<table class="table table-danger f-mt20">
	<thead>
		<tr>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
			<th>创建时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5">表尾数据</td>
		</tr>
	</tfoot>
</table>

<p class="f-mt20">
	
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="thumbnail">
					<a href="#"><img src="statics/images/pic.png" /></a>
				</div>
			</div>
			<div class="col-md-4">
				<div class="thumbnail">
					<a href="#"><img src="statics/images/pic.png" /></a>
					<div class="caption">
						<h3><a href="#">Ruby Rose</a></h3>
						<p>查看来源网站Dribbble</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="thumbnail noborder">
					<a href="#"><img src="statics/images/pic.png" /></a>
					<div class="caption">
						<h3><a href="#">Ruby Rose</a></h3>
						<p>查看来源网站Dribbble</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</p>

<p class="container f-mt20">
	
	<div class="row">
		<div class="col-md-3">
			<!--list-group-->
			<ul class="list-group">
				<li class="list-group-item"><a href="#">谷歌光纤建设进度：正扩军至盐湖城</a></li>
				<li class="list-group-item"><a href="#">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</a></li>
				<li class="list-group-item"><a href="#">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</a></li>
				<li class="list-group-item"><a href="#">旧金山新Apple Store旗舰店主体接近完成</a></li>
				<li class="list-group-item"><a href="#">《X档案》迷你剧获预定 今夏开始制作</a></li>
			</ul>
			<!--/list-group-->
		</div>
	</div>
	
	<div class="row f-mt10">
		<div class="col-md-3">
			<!--list-group-->
			<ul class="list-group list-group-noborder">
				<li class="list-group-item"><a href="#">谷歌光纤建设进度：正扩军至盐湖城</a></li>
				<li class="list-group-item"><a href="#">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</a></li>
				<li class="list-group-item"><a href="#">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</a></li>
				<li class="list-group-item"><a href="#">旧金山新Apple Store旗舰店主体接近完成</a></li>
				<li class="list-group-item"><a href="#">《X档案》迷你剧获预定 今夏开始制作</a></li>
			</ul>
			<!--/list-group-->
		</div>
	</div>
	
	<div class="row f-mt10">
		<div class="col-md-3">
			<!--list-group-->
			<ul class="list-group">
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">谷歌光纤建设进度：正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城</a></h4>
					<p class="list-group-item-text">谷歌光纤项目继续扩展，随着在今年一月谷歌光纤扩展至新一波城市亚特兰大，夏洛特，纳什维尔以及罗利·达勒姆之后，谷歌宣布 光纤项目即将开展盐湖城的建设。</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</a></h4>
					<p class="list-group-item-text">随着微软推出Windows 10 Build 10041，N卡用户们也迎来了GeForce 349.90 WHQL显卡驱动。</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</a></h4>
					<p class="list-group-item-text">有些时候，人们似乎很难想象究竟有多少个人数据被曝光在外边，因为任何人都有能力看到它们。</p>
				</li>
				<li class="list-group-item">
					<h4 class="list-group-item-heading"><a href="#">旧金山新Apple Store旗舰店主体接近完成</a></h4>
					<p class="list-group-item-text">苹果位于旧金山Union Square(联合广场)的新旗舰Apple Store离正式开业的时间不远了，根据国外网友提供的图片来看建筑的主体已经接近完成</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">《X档案》迷你剧获预定 今夏开始制作</a></h4>
					<p class="list-group-item-text">据国外媒体报道，1993年开播的《X档案》(The X-Files)是无数观众心目中的一部经典美剧，也是很多中国观众的启蒙美剧。</p>
				</li>
			</ul>
			<!--/list-group-->
		</div>
	</div>
	
	<div class="row f-mt10">
		<div class="col-md-3">
			<!--list-group-->
			<ul class="list-group list-group-noborder">
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">谷歌光纤建设进度：正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城</a></h4>
					<p class="list-group-item-text">谷歌光纤项目继续扩展，随着在今年一月谷歌光纤扩展至新一波城市亚特兰大，夏洛特，纳什维尔以及罗利·达勒姆之后，谷歌宣布 光纤项目即将开展盐湖城的建设。</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</a></h4>
					<p class="list-group-item-text">随着微软推出Windows 10 Build 10041，N卡用户们也迎来了GeForce 349.90 WHQL显卡驱动。</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</a></h4>
					<p class="list-group-item-text">有些时候，人们似乎很难想象究竟有多少个人数据被曝光在外边，因为任何人都有能力看到它们。</p>
				</li>
				<li class="list-group-item">
					<h4 class="list-group-item-heading"><a href="#">旧金山新Apple Store旗舰店主体接近完成</a></h4>
					<p class="list-group-item-text">苹果位于旧金山Union Square(联合广场)的新旗舰Apple Store离正式开业的时间不远了，根据国外网友提供的图片来看建筑的主体已经接近完成</p>
				</li>
				<li class="list-group-item">
					<a href="#" class="list-group-item-img"><img src="statics/images/pic.png"></a>
					<h4 class="list-group-item-heading"><a href="#">《X档案》迷你剧获预定 今夏开始制作</a></h4>
					<p class="list-group-item-text">据国外媒体报道，1993年开播的《X档案》(The X-Files)是无数观众心目中的一部经典美剧，也是很多中国观众的启蒙美剧。</p>
				</li>
			</ul>
			<!--/list-group-->
		</div>
	</div>
	
	<div class="row f-mt10">
		<div class="col-md-3">
			<!--list-group-->
			<div class="list-group">
				<a href="#" class="list-group-item disabled">谷歌光纤建设进度：正扩军至盐湖城</a>
				<a href="#" class="list-group-item">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</a>
				<a href="#" class="list-group-item">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</a>
				<a href="#" class="list-group-item">旧金山新Apple Store旗舰店主体接近完成</a>
				<a href="#" class="list-group-item">《X档案》迷你剧获预定 今夏开始制作</a>
			</div>
			<!--/list-group-->
		</div>
	</div>
	
	<div class="row f-mt10">
		<div class="col-md-3">
			<!--list-group-->
			<div class="list-group">
				<a href="#" class="list-group-item disabled">
					<span href="#" class="list-group-item-img"><img src="statics/images/pic.png"></span>
					<h4 class="list-group-item-heading">谷歌光纤建设进度：正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城正扩军至盐湖城</h4>
					<p class="list-group-item-text">谷歌光纤项目继续扩展，随着在今年一月谷歌光纤扩展至新一波城市亚特兰大，夏洛特，纳什维尔以及罗利·达勒姆之后，谷歌宣布 光纤项目即将开展盐湖城的建设。</p>
				</a>
				<a href="#" class="list-group-item">
					<span href="#" class="list-group-item-img"><img src="statics/images/pic.png"></span>
					<h4 class="list-group-item-heading">想领略DX12的魅力？你得先挺过显卡驱动崩溃死机这一关</h4>
					<p class="list-group-item-text">随着微软推出Windows 10 Build 10041，N卡用户们也迎来了GeForce 349.90 WHQL显卡驱动。</p>
				</a>
				<a href="#" class="list-group-item">
					<span href="#" class="list-group-item-img"><img src="statics/images/pic.png"></span>
					<h4 class="list-group-item-heading">曝Ars Technica获得奥克兰州470多万个车牌照扫描数据</h4>
					<p class="list-group-item-text">有些时候，人们似乎很难想象究竟有多少个人数据被曝光在外边，因为任何人都有能力看到它们。</p>
				</a>
				<a href="#" class="list-group-item">
					<span href="#" class="list-group-item-img"><img src="statics/images/pic.png"></span>
					<h4 class="list-group-item-heading">旧金山新Apple Store旗舰店主体接近完成</h4>
					<p class="list-group-item-text">苹果位于旧金山Union Square(联合广场)的新旗舰Apple Store离正式开业的时间不远了，根据国外网友提供的图片来看建筑的主体已经接近完成</p>
				</a>
				<a href="#" class="list-group-item">
					<span href="#" class="list-group-item-img"><img src="statics/images/pic.png"></span>
					<h4 class="list-group-item-heading">《X档案》迷你剧获预定 今夏开始制作</h4>
					<p class="list-group-item-text">据国外媒体报道，1993年开播的《X档案》(The X-Files)是无数观众心目中的一部经典美剧，也是很多中国观众的启蒙美剧。</p>
				</a>
			</div>
			<!--/list-group-->
		</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="container">
		<div class="row">
			<div class="col-md-2 text-center">
				<span class="label label-default">默认标签</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="label label-primary">主要标签</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="label label-success">成功标签</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="label label-info">信息标签</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="label label-warning">警告标签</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="label label-danger">危险标签</span>
			</div>
		</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="container">
		<div class="row">
			<div class="col-md-2 text-center">
				<span class="badge badge-default">12</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="badge badge-primary">23</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="badge badge-success">34</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="badge badge-info">45</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="badge badge-warning">56</span>
			</div>
			<div class="col-md-2 text-center">
				<span class="badge badge-danger">78</span>
			</div>
		</div>
	</div>

</p>

<p class="f-mt20">
	
	<ul class="breadcrumb">
		<li><a href="#">首页</a> <span class="divider">/</span></li>
		<li><a href="#">列表</a> <span class="divider">/</span></li>
		<li class="active">详细</li>
	</ul>

</p>

<p class="f-mt20">
	
	<a href="#" class="btn btn-default" data-modal-id="modal-default">模态窗</a>
	<a href="#" class="btn btn-default" data-modal-id="modal-default2">模态窗</a>
	<a href="#" class="btn btn-primary" data-modal-id="modal-primary">模态窗</a>
	<a href="#" class="btn btn-success" data-modal-id="modal-success">模态窗</a>
	<a href="#" class="btn btn-info" data-modal-id="modal-info">模态窗</a>
	<a href="#" class="btn btn-warning" data-modal-id="modal-warning">模态窗</a>
	<a href="#" class="btn btn-danger" data-modal-id="modal-danger">模态窗</a>

	<div id="modal-default" class="modal">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-info">确定</div>
		</div>
	</div>

	<div id="modal-default2" class="modal modal-default">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-info">确定</div>
		</div>
	</div>

	<div id="modal-primary" class="modal modal-primary">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-primary">确定</div>
		</div>
	</div>

	<div id="modal-success" class="modal modal-success">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-success">确定</div>
		</div>
	</div>

	<div id="modal-info" class="modal modal-info">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-info">确定</div>
		</div>
	</div>

	<div id="modal-warning" class="modal modal-warning">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-warning">确定</div>
		</div>
	</div>

	<div id="modal-danger" class="modal modal-danger">
		<div class="modal-heading">
			<span class="right-content close-modal">&#215;</span>
			<div class="modal-title"><strong>模态窗头部</strong></div>
		</div>
		<div class="modal-body">
			模态窗内容
		</div>
		<div class="modal-footer text-right">
			<div class="btn btn-default close-modal">关闭</div>
			<div class="btn btn-danger">确定</div>
		</div>
	</div>

</p>

<p class="f-mt10">
	<div class="container">
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
			<div class="col-box col-md-1">col-md-1</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-2">col-md-2</div>
			<div class="col-box col-md-2">col-md-2</div>
			<div class="col-box col-md-2">col-md-2</div>
			<div class="col-box col-md-2">col-md-2</div>
			<div class="col-box col-md-2">col-md-2</div>
			<div class="col-box col-md-2">col-md-2</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-3">col-md-3</div>
			<div class="col-box col-md-3">col-md-3</div>
			<div class="col-box col-md-3">col-md-3</div>
			<div class="col-box col-md-3">col-md-3</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-4">col-md-4</div>
			<div class="col-box col-md-4">col-md-4</div>
			<div class="col-box col-md-4">col-md-4</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-6">col-md-6</div>
			<div class="col-box col-md-6">col-md-6</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-12">col-md-12</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-5">col-md-5</div>
			<div class="col-box col-md-5">col-md-5</div>
			<div class="col-box col-md-2">col-md-2</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-7">col-md-7</div>
			<div class="col-box col-md-5">col-md-5</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-8">col-md-8</div>
			<div class="col-box col-md-4">col-md-4</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-9">col-md-9</div>
			<div class="col-box col-md-3">col-md-3</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-10">col-md-10</div>
			<div class="col-box col-md-2">col-md-2</div>
		</div>
		<div class="row f-mt10 clearfix">
			<div class="col-box col-md-11">col-md-11</div>
			<div class="col-box col-md-1">col-md-1</div>
		</div>
	</div>
</p>


<p class="f-mt20">
	
	<ul class="pagination default">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
	
	<ul class="pagination primary">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
	
	<ul class="pagination success">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
	
	<ul class="pagination info">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
	
	<ul class="pagination warning">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
	
	<ul class="pagination danger">
		<li class="disabled"><a href="#">上一页</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">下一页</a></li>
	</ul>

</p>


<p class="f-mt20">
	
	<div class="tabs" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-11">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-12">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-13">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-14">标签四</a></li>
		</ul>
		
		<div class="tabs-body" id="tabs-11">标签一内容</div>
		<div class="tabs-body" id="tabs-12">标签二内容</div>
		<div class="tabs-body" id="tabs-13">标签三内容</div>
		<div class="tabs-body" id="tabs-14">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-default" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-21">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-22">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-23">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-24">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-21">标签一内容</div>
		<div class="tabs-body" id="tabs-22">标签二内容</div>
		<div class="tabs-body" id="tabs-23">标签三内容</div>
		<div class="tabs-body" id="tabs-24">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-primary" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-31">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-32">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-33">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-34">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-31">标签一内容</div>
		<div class="tabs-body" id="tabs-32">标签二内容</div>
		<div class="tabs-body" id="tabs-33">标签三内容</div>
		<div class="tabs-body" id="tabs-34">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-success" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-41">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-42">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-43">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-44">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-51">标签一内容</div>
		<div class="tabs-body" id="tabs-52">标签二内容</div>
		<div class="tabs-body" id="tabs-53">标签三内容</div>
		<div class="tabs-body" id="tabs-54">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-info" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-51">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-52">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-53">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-54">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-51">标签一内容</div>
		<div class="tabs-body" id="tabs-52">标签二内容</div>
		<div class="tabs-body" id="tabs-53">标签三内容</div>
		<div class="tabs-body" id="tabs-54">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-warning" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-61">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-62">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-63">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-64">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-61">标签一内容</div>
		<div class="tabs-body" id="tabs-62">标签二内容</div>
		<div class="tabs-body" id="tabs-63">标签三内容</div>
		<div class="tabs-body" id="tabs-64">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<div class="tabs tabs-pills tabs-danger" data-toggle="tabs">
		<ul class="tabs-heading clearfix">
			<li class="tabs-heading-item active"><a href="#tabs-71">标签一</a></li>
			<li class="tabs-heading-item"><a href="#tabs-72">标签二</a></li>
			<li class="tabs-heading-item"><a href="#tabs-73">标签三</a></li>
			<li class="tabs-heading-item"><a href="#tabs-74">标签四</a></li>
		</ul>
		<div class="tabs-body" id="tabs-71">标签一内容</div>
		<div class="tabs-body" id="tabs-72">标签二内容</div>
		<div class="tabs-body" id="tabs-73">标签三内容</div>
		<div class="tabs-body" id="tabs-74">标签四内容</div>
	</div>

</p>

<p class="f-mt20">
	
	<a href="javascript:voit(0)" data-dropdown="#dropdown-0" class="btn btn-info">下拉按钮</a>
	<a href="javascript:voit(0)" data-dropdown="#dropdown-1" class="btn btn-info">居右的下拉按钮</a>
	<a href="javascript:voit(0)" data-dropdown="#dropdown-2" class="btn btn-info">内容带滚动条下拉按钮</a>
	<a href="javascript:voit(0)" data-dropdown="#dropdown-3" class="btn btn-info">带表单的下拉按钮</a>
	<a href="javascript:voit(0)" data-dropdown="#dropdown-4" class="btn btn-info">自由内容的下拉按钮</a>
	
	<div id="dropdown-0" class="dropdown dropdown-tip">
		<ul class="dropdown-menu">
			<li><a href="#1">Item 1</a></li>
			<li><a href="#2">Item 2</a></li>
			<li><a href="#3">Item 3</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#4">Item 4</a></li>
			<li><a href="#5">Item 5</a></li>
			<li><a href="#5">Item 6</a></li>
		</ul>
	</div>

	<div id="dropdown-1" class="dropdown dropdown-tip pull-right">
		<ul class="dropdown-menu">
			<li><a href="#1">Item 1</a></li>
			<li><a href="#2">Item 2</a></li>
			<li><a href="#3">Item 3</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#4">Item 4</a></li>
			<li><a href="#5">Item 5</a></li>
			<li><a href="#5">Item 6</a></li>
		</ul>
	</div>

	<div id="dropdown-2" class="dropdown dropdown-tip dropdown-scroll">
		<ul class="dropdown-menu">
			<li><a href="#1">Item 1</a></li>
			<li><a href="#2">Item 2</a></li>
			<li><a href="#3">Item 3</a></li>
			<li><a href="#4">Item 4</a></li>
			<li><a href="#5">Item 5</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#6">Item 6</a></li>
			<li><a href="#7">Item 7</a></li>
			<li><a href="#8">Item 8</a></li>
			<li><a href="#9">Item 9</a></li>
			<li><a href="#10">Item 10</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#11">Item 11</a></li>
			<li><a href="#12">Item 12</a></li>
			<li><a href="#13">Item 13</a></li>
			<li><a href="#14">Item 14</a></li>
			<li><a href="#15">Item 15</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#16">Item 16</a></li>
			<li><a href="#17">Item 17</a></li>
			<li><a href="#18">Item 18</a></li>
			<li><a href="#19">Item 19</a></li>
			<li><a href="#20">Item 20</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#21">Item 21</a></li>
			<li><a href="#22">Item 22</a></li>
			<li><a href="#23">Item 23</a></li>
			<li><a href="#24">Item 24</a></li>
			<li><a href="#25">Item 25</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#26">Item 26</a></li>
			<li><a href="#27">Item 27</a></li>
			<li><a href="#28">Item 28</a></li>
			<li><a href="#29">Item 29</a></li>
			<li><a href="#30">Item 30</a></li>
		</ul>
	</div>

	<div id="dropdown-3" class="dropdown dropdown-tip">
		<ul class="dropdown-menu">
			<li><label><input type="checkbox" /> Checkbox 1</label></li>
			<li><label><input type="checkbox" /> Checkbox 2</label></li>
			<li><label><input type="checkbox" /> Checkbox 3</label></li>
			<li class="dropdown-divider"></li>
			<li><label><input type="radio" name="radio-group" checked="checked" /> Radio 1</label></li>
			<li><label><input type="radio" name="radio-group" /> Radio 2</label></li>
			<li><label><input type="radio" name="radio-group" /> Radio 3</label></li>
		</ul>
	</div>

	<div id="dropdown-4" class="dropdown dropdown-tip">
		<div class="dropdown-panel">
			Here is some <code>HTML</code> inside of a dropdown. You can put pretty much
			anything inside of a dropdown, so have fun with it!
		</div>
	</div>
</p>

<p class="f-mt20">

	<a href="#toggled-section" class="btn btn-primary" data-toggle="collapse">
		<span data-hide-on="collapsed">关闭内容</span>
    	<span data-hide-on="expanded">显示内容</span>
	</a>
	<div class="box box-default col-md-4 collapse" id="toggled-section">
		<p>折叠内容</p>
		<p>折叠内容</p>
		<p>折叠内容</p>
		<p>折叠内容</p>
		<p>折叠内容</p>
		<p>折叠内容</p>
	</div>

</p>

<p class="f-mt20">

	<a href="#" class="btn btn-default" data-toggle="tips" data-original-title="top tips" data-placement="top">you probably</a>
	<a href="#" class="btn btn-default" data-toggle="tips" data-original-title="right tips" data-placement="right">you probably</a>
	<a href="#" class="btn btn-default" data-toggle="tips" data-original-title="bottom tips" data-placement="bottom">you probably</a>
	<a href="#" class="btn btn-default" data-toggle="tips" data-original-title="left tips" data-placement="left">you probably</a>

</p>

<p class="f-mt20">

	<a href="javascript:voit(0);" class="btn btn-large btn-danger" role="button" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">点击查看弹出提示</a>

	<a href="javascript:voit(0);" class="btn btn-large btn-danger" role="button" data-toggle="popover" data-placement="right" data-html="true" data-content="<a class='btn btn-info'>这里用到html</a>" data-original-title="A Title">点击查看弹出提示</a>

	<a tabindex="0" class="btn btn-large btn-danger" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

	<a href="javascript:voit(0);" class="btn btn-large btn-danger" role="button" data-toggle="popover" data-placement="auto left" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">点击查看弹出提示</a>

</p>

<div id="myCarousel" class="carousel slide f-mt20" data-toggle="carousel">

	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	
	<div class="carousel-inner">
		<div class="active item">
			<img src="t/banner-1.jpg">
			<div class="carousel-caption">图片文字1</div>
		</div>
		<div class="item">
			<img src="t/banner-2.jpg">
			<div class="carousel-caption">图片文字2</div>
		</div>
		<div class="item">
			<img src="t/banner-3.jpg">
			<div class="carousel-caption">图片文字3</div>
		</div>
	</div>
	
	<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
	<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>


<p class="f-mt20">
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

</p>


<script src="statics/js/jquery.min.js"></script>
<script src="statics/js/plugin/jquery.modal.min.js"></script>
<script src="statics/js/plugin/jquery.tabs.min.js"></script>
<script src="statics/js/plugin/jquery.spinner.min.js"></script>
<script src="statics/js/plugin/jquery.collapse.min.js"></script>
<script src="statics/js/plugin/jquery.dropdown.min.js"></script>
<script src="statics/js/plugin/jquery.tips.min.js"></script>
<script src="statics/js/plugin/jquery.popover.min.js"></script>
<script src="statics/js/plugin/jquery.carousel.min.js"></script>
<script src="statics/js/plugin/jquery.datepicker.min.js"></script>

</body>
</html>